<template>
  <div class="qapage">
    <div class="input-section">
      <input v-model="question" placeholder="输入问题" />
      <button @click="submitQuestion">提交</button>
    </div>
    <div class="answer-section">
      <textarea v-model="answer" placeholder="问题的回答" readonly></textarea>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios'

const question = ref('');
const answer = ref('');



const submitQuestion = () => {
  // 在这里你可以添加处理问题的逻辑，暂时我用一个简单的示例来更新答案
   axios.post('http://loaclhost:3000/openai',{
    question:question.value,
  }).then(res=>{
    console.log(res.data[0].message.content);
    answer.value=res.data[0].message.content
  })
};
</script>

<style>
.qapage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.input-section {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.answer-section {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  width: 300px;
}

textarea {
  width: 100%;
  min-height: 100px;
  border: none;
  outline: none;
  resize: none;
}
</style>
